<!--
 * @Descripttion: 
 * @version: 
 * @Author: Hq747
 * @Date: 2021-07-04 19:36:59
 * @LastEditors: Hq747
 * @LastEditTime: 2021-07-06 18:51:55
-->
<template>
  <div class="helpful">
    <div class="header">
      <van-sticky>
        <van-nav-bar title="帮助页面" left-arrow @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div class="select">
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        disabled
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="list">
      <div class="text">
        <img
          width="26px"
          src="http://8.134.121.225/ej-app-customer/static/img/tip.463929cf.png"
          alt=""
        />
        <div class="tittle">常见问题</div>
      </div>
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item" :title="item" />
        </van-list>

      <div class="text">
        <img
          width="26px"
          src="http://8.134.121.225/ej-app-customer/static/img/tip.463929cf.png"
          alt=""
        />
        <div class="tittle">更多问题</div>
      </div>
      <van-grid :column-num="3">
        <van-grid-item text="订单相关" />
        <van-grid-item text="客户端使用" />
        <van-grid-item text="优惠券与活动" />
        <van-grid-item text="支付与费用" />
        <van-grid-item text="服务相关" />
      </van-grid>
      <div class="Echarts">
        <div id="main" style="width: 375px; height: 350px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Echarts",
  data() {
    return {
      list: ['1.优惠券如何使用','2.取消订单后钱什么时候到账','3.可以固定同一个阿姨服务吗','4.如何选择上一次服务的阿姨','5.预约成功后在哪查看'],
      loading: false,
      finished: false,
      value:'',
    };
  },
  methods: {
    //2. 在methods中生成一个对应的方法 用来渲染ECharts图表
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      // 因为echarts全局使用可能会有问题 所以我们在js中 将它在原型中定义为$echarts
      // 2.对应的组件中 方法中 直接使用this.$echarts
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        title: {
				  text: '问题数量统计'
			  },
        legend: {
          top: "bottom",
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [15, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            data: [
              { value: 8, name: "订单相关" },
              { value: 6, name: "客户端使用" },
              { value: 4, name: "优惠券与活动" },
              { value: 3, name: "支付与费用" },
              { value: 5, name: "服务相关" },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    showPopup() {
      this.show = true;
    },
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 5) {
          this.finished = true;
        }
      }, 1000);
    },
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 5) {
          this.finished = true;
        }
      }, 1000);
    },
  },
  mounted() {
    this.myEcharts();
  },
};
</script>

<style scoped>
.header /deep/ .van-nav-bar {
  height: 48px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 48px;
  letter-spacing: 0.4em;
}
.header /deep/ .van-nav-bar__title {
  color: white !important;
  font-size: 16px;
}
.header /deep/ .van-nav-bar__text {
  font-size: 16px;
}
.header /deep/ .van-icon {
  color: white !important;
  font-size: 16px;
}
.text {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
.tittle {
  line-height: 30px;
  font-size: 20px;
}
.list {
  padding-bottom: 50px;
}
</style>
